import React, { PureComponent } from 'react'
import Topic from './components/Topic.js'
import List from './components/List.js'
import Recommend from './components/Recommend.js'
import Writer from './components/Writer.js'
import { connect } from 'react-redux'
import {
  CHANGHE_SHOW_SCROLL
} from './store/constants'
import {
  HomeWrapper,
  HomeLeft,
  HomeRight
} from './style.js'
import {
  getHomeInfo
} from './store/actionCreators'
import { BackTop } from 'antd'
class Home extends PureComponent {
  componentDidMount() {
    this.props.changeHomeData()
    this.bindEvents()
  }
  bindEvents() {
    window.addEventListener('scroll', this.props.changeScrollShow)
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.props.changeScrollShow)
  }
  
  render() {
    return (
      <HomeWrapper>
        <HomeLeft>
          <img className='banner-img' src="https://lupic.cdn.bcebos.com/20191203/3019289773_14.jpg" alt="banner-img."/>
          <Topic/>
          <List/>
        </HomeLeft>
        <HomeRight>
          <Recommend/>
          <Writer/>
        </HomeRight>
        {
          this.props.showScroll ? <BackTop className='BackTop' visibilityHeight={300}></BackTop> : null
        }
        
      </HomeWrapper>
    )
  }
}
const mapStateToProps = state => ({
  showScroll: state.getIn(['home', 'showScroll'])
})
const mapDispatchToProps = dispatch => ({
  changeHomeData() {
    dispatch(getHomeInfo())
  },
  changeScrollShow() {
    const show = document.documentElement.scrollTop > 300
    const action = {
      type: CHANGHE_SHOW_SCROLL,
      show
    }
    dispatch(action)
  }
})
export default connect(mapStateToProps, mapDispatchToProps)(Home)